<template>
  <div class="roleManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleEdit('create')"
        >
          添加
        </el-button>
        <!--<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
          批量删除
        </el-button>-->
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryParam" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryParam.name"
              placeholder="请输入程序名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :data="dataSource"
      :element-loading-text="elementLoadingText"
      border
      @selection-change="setSelectRows"
    >
      <!--<el-table-column show-overflow-tooltip type="selection"></el-table-column>-->
      <el-table-column
        v-for="(value, key, index) in showTempDesc"
        :key="index"
        align="center"
        show-overflow-tooltip
        :prop="key"
        :label="value"
      ></el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        width="400"
        label="操作"
      >
        <template #default="{ row }">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            plain
            @click="handleInfo(row)"
          >
            详情
          </el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-setting"
            plain
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            plain
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="ipagination.page"
      :page-size="ipagination.limit"
      :layout="layout"
      :total="ipagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <program-management-edit
      ref="edit"
      @fetch-data="submitForm"
    ></program-management-edit>
    <program-detailed-info ref="info"></program-detailed-info>
  </div>
</template>

<script>
  import { BaseListMixin } from '@/mixins/BaseListMixin'
  import ProgramManagementEdit from './components/ProgramManagementEdit'
  import ProgramDetailedInfo from './components/ProgramDetailedInfo'

  // 添加常量
  const addTempDesc = {
    id: '',
    preId: '程序编号',
    name: '程序名称',
    status: '状态',
    hostIp: '主机ip',
    installationDir: '安装地址',
    description: '描述',
    createTime: '创建时间',
    dataType: '数据类型',
    organization: '组织',
    modelNum: '型号',
    speciality: '专业',
    modelNumPart: '部件',
    versionNum: '版本编号',
    freeNum: '自由编号',
    createrPreId: '创建人',
    createTime6: '创建时间',
    specialityName: '专业名称',
    organizationName: '组织名称',
  }
  // 添加常量
  const showTempDesc = {
    preId: '程序编号',
    name: '程序名称',
    versionNum: '版本编号',
    specialityName: '专业名称',
    hostIp: '主机ip',
    installationDir: '安装地址',
    description: '描述',
    createTime6: '创建时间',
  }
  export default {
    name: 'ProgranList',
    components: { ProgramDetailedInfo, ProgramManagementEdit },
    mixins: [BaseListMixin],
    data() {
      return {
        addTempDesc: addTempDesc,
        showTempDesc: showTempDesc,
        url: {
          listPage: '/presoftasim/resourcedata/program/listpage',
          delete: '/presoftasim/resourcedata/program/delete',
          create: '/presoftasim/resourcedata/program/create',
          update: '/presoftasim/resourcedata/program/update',
          createPreId: '/presoftasim/resourcedata/program/createPreId',
          getModelFromSelects:
            '/presoftasim/resourcedata/program/getModelFromSelects',
        },
        rules: {},
        tempDesc: {},
      }
    },
    created() {},
    methods: {
      handleInfo(row) {
        console.log(this.$refs['info'])
        this.$refs['info'].showEdit(row)
      },
      /* 删除的方法 */
      handleDelete(row) {
        //不能使用id 判断 ！！ 程序管理没有id属性只有oid属性
        if (row.oid) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            //删除单行
            deleteAction(this.url.delete, { oid: row.oid }).then((res) => {
              this.loadData()
            })
          })
        }
      },
    },
  }
</script>

<style lang="scss">
  .prependDiv {
    width: 50px;
  }
  .itemRow {
    padding: 0px 20px;
    /*margin-bottom: 25px;*/
  }
  .itemLabel {
    font-size: 14px;
    color: #606266;
    line-height: 36px;
    text-align: right;
    padding: 0px;
    font-weight: 700;
    align: 'right';
  }
  .itemText {
    padding: 0 15px;
    /*width: 100%;*/
    /*height: 36px;*/
    /*border-radius: 4px;*/
    /*border: 1px solid #DCDFE6;*/
  }
  .remarks >>> .el-input__inner {
    /*border: 0px solid;*/
    position: relative;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    font-family: 'PingFang';
    font-size: 12px;
  }

  //修改disabled的样式

  .remarks >>> .is-disabled .el-input__inner {
    /*　　background-color:white;*/
    /*　　border-color: white；*/
  }

  // 修改placeholderd的样式

  .remarks >>> .el-input__inner::-webkit-input-placeholder {
    color: rgba(121, 130, 148, 1);
    text-align: left;
    font-family: 'PingFang';
    font-size: 12px;
    position: relative;
  }
  /*修改el-input disabled状态下的字体颜色*/
  .rt-input #deep .el-input__inner {
    color: rgb(92, 112, 234) !important;
    cursor: pointer;
  }
</style>
